<template>
    <div class="city-map-mark">
        <div style="height: 50px;line-height: 50px;text-align: center;position: absolute;z-index: 1;">
            <div style="margin-left:50px;float: left">
                <input type="text" id="suggestId" size="20" style="padding: 11px 12px;border: 1px solid #ccc;border-radius: 4px;width: 360px;" v-model="searchName"
                        placeholder="请输入要搜索的地址"/>
                <el-button type="primary" @click="searchName=''">清除</el-button>
            </div>                    
        </div>
        <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
        <div id="cityMarkBaiduMap" style="width: 100%;height: 500px;"></div>
    </div>
</template>
<script>
import BMap from 'BMap'
import BMapLib from 'BMapLib'
import '@/libs/bdMap/DrawingManager_min.css'

var map
var drawingManager
export default {
    name: 'BMap-Model',
    data() {
        return {
            searchName: '',
            longitude: '', // 经度
            latitude: '', // 纬度
            marksArray: [], // 记录所有已经打的点
            overlays: [], // 保存点
            noMakerArr: [], // 不是点
            unitMsgArr: [], // 联网单位中心点
        }
    },
    created() {
        let that = this
        that.$nextTick(() => {
            // 地图初始化
            map = new BMap.Map('cityMarkBaiduMap', {enableMapClick:false})
            //初始化地图绘制工具
            that.initMap()
        })
    },
    methods: {
        //初始化标注工具
        initMap() {
            let that = this
            $(".city-map-mark .BMapLib_Drawing").remove();
            if(drawingManager){
                drawingManager=0;
            }
            drawingManager = new BMapLib.DrawingManager(map,{
                isOpen: false, //是否开启绘制模式
                enableDrawingTool: true, //是否显示工具栏
                drawingToolOptions: {
                    anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
                    offset: new BMap.Size(5, 5), //偏离值
                }
            });
            drawingManager.addEventListener('overlaycomplete', that.overlaycomplete);
        },
        overlaycomplete(e) {
            let that = this
            map.removeOverlay(that.overlays[0])
            that.overlays = []
            that.noMakerArr = []
            that.noMakerArr.push(e.overlay)
            //目前只有点的概念
            if(e.drawingMode == 'marker'){
                that.overlays.push(e.overlay)
                // 向父组件传递信息
                that.$emit('newMarkPoint', e.overlay.point.lng , e.overlay.point.lat)
                //移除图上不是点的
                that.noMakerArr = []
            }
        },
        // 增加标注点
        addMarker(longitude, latitude) {
            map.clearOverlays()

            let that = this
            if(that.unitMsgArr.length>0){
                for(var i=0;i<that.unitMsgArr.length;i++){
                    map.removeOverlay(that.unitMsgArr[i]);
                }
            }
            that.unitMsgArr=[];
            var point = "";
            var marker="";
            point = new BMap.Point(longitude,latitude);
            marker = new BMap.Marker(point); //点覆盖物
            map.addOverlay(marker);
            // marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
            that.unitMsgArr.push(marker);
            //marker.hide()  //覆盖物隐藏
            marker.enableDragging(); //marker可拖拽
            map.centerAndZoom(point, 16);
            map.enableScrollWheelZoom(); 
            //===================搜索框=================================
            function G(id) {
                return document.getElementById(id);
            }
            var ac = new BMap.Autocomplete({
                "input": "suggestId",
                "location": map
            });
            ac.addEventListener("onhighlight", function (e) {  //鼠标放在下拉列表上的事件
                var str = "";
                var _value = e.fromitem.value;
                var value = "";
                
                if (e.fromitem.index > -1) {
                    value = _value.province + _value.city + _value.district + _value.street + _value.business;
                }
                str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

                value = "";
                if (e.toitem.index > -1) {
                    _value = e.toitem.value;
                    value = _value.province + _value.city + _value.district + _value.street + _value.business;
                }
                str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
                G("searchResultPanel").innerHTML = str;
            });
            var myValue;
            ac.addEventListener("onconfirm", function (e) {    //鼠标点击下拉列表后的事件
                var _value = e.item.value;
                myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
                G("searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
                setPlace();
            });
            function setPlace() {
                map.clearOverlays();    //清除地图上所有覆盖物
                function myFun() {
                    var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
                    map.centerAndZoom(pp, 18);
                    map.addOverlay(new BMap.Marker(pp));    //添加标注
                    // 向父组件传递信息
                    that.$emit('newMarkPoint', pp.lng, pp.lat)
                }
                var local = new BMap.LocalSearch(map, { //智能搜索
                    onSearchComplete: myFun
                });
                local.search(myValue);
            }
        },
        // 清楚标记点
        clearMarkPoint() {
            // 清除地图标记点
            map.clearOverlays()
        },
        // 设置地图标注点信息
        setMapMarkInfo(markType, data) {
            let that =this
            let listData = data
            let selectedType = markType
            
            that.marksArray=[]
            $.each(listData, (i, datavalue) => {
                //单独设定图标的样式
                if(selectedType==1){
                    var icon = new BMap.Icon('https://img.kdlayun.com/dic/rdspFile_1533814554496.png', new BMap.Size(20, 20), {
                        anchor: new BMap.Size(10, 10)
                    })
                }else if(selectedType==2){
                    var icon = new BMap.Icon('https://img.kdlayun.com/dic/rdspFile_1533814488812.png', new BMap.Size(20, 20), {
                        anchor: new BMap.Size(10, 10)
                    })
                }else if(selectedType==3){
                    var icon = new BMap.Icon('https://img.kdlayun.com/dic/rdspFile_1533814579983.png', new BMap.Size(20, 20), {
                        anchor: new BMap.Size(10, 10)
                    })
                }else if(selectedType==4){
                    var icon = new BMap.Icon('https://img.kdlayun.com/dic/rdspFile_1533814566104.png', new BMap.Size(20, 20), {
                        anchor: new BMap.Size(10, 10)
                    })
                }

                var marker = new BMap.Marker(new BMap.Point(datavalue.lon, datavalue.lat), {
                    icon: icon
                });
                that.marksArray.push(marker)

                var label = new BMap.Label(datavalue.markName, {offset:new BMap.Size(-25,-25)})
                label.setStyle({
                    display:"block",
                    color : "red",
                    fontSize : "12px",
                    height : "25px",
                    lineHeight : "20px",
                    'padding-left': "20px",
                    'padding-right': "20px",
                    "max-width": "none",
                    "min-width": "80px",
                    fontFamily:"微软雅黑"
                })
                marker.setLabel(label);
                map.addOverlay(marker); 
            });
            if(listData.length>0){
                that.fixedTypeCenter(listData[0].lon, listData[0].lat)
            }else{
                // 默认经纬度
                // 用户信息中是否存在经纬度信息
                var longitude = JSON.parse(that.$store.state.userinfo.org.mapLocation).lon;
                var latitude = JSON.parse(that.$store.state.userinfo.org.mapLocation).lat;
                that.fixedTypeCenter(longitude, latitude); 
            }
        },
        // 定位功能
        pointCenter(longitude,latitude) {
            var point = ''
            var marker = ''
            point = new BMap.Point(longitude,latitude)
            map.centerAndZoom(point, 16)
            map.enableScrollWheelZoom() 
        },
        //显示初始定位
        fixedTypeCenter(longitude, latitude) {
            var point = new BMap.Point(longitude,latitude)
            var marker= new BMap.Marker(point) // 点覆盖物
            map.centerAndZoom(point, 14)
        },
        // 定位
        showPoint(lon, lat, scope) {
            var that = this
            var marker = ''
            for (var i = 0; i< that.marksArray.length; i++) {
                marker = that.marksArray[i]  
                if(marker.point.lng==lon && marker.point.lat==lat && i == scope.$index){
                    marker.setZIndex(100)
                    //设置中心点
                    that.pointCenter(lon,lat);
                    marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画   
                }else{
                    marker.setZIndex(80)
                    marker.setAnimation(); //跳动的动画  
                }
            }
        },
        saveSuccess() {
            if(drawingManager){
                drawingManager=0
            }
        }
    }
}
</script>

